/* MAIN FILE INPUT POPUP CONTAINER */

.main-file-input-container {
	width: 620px;
	color: #535C69;
}

/* STATEMENTS */
.main-file-input-control-slide-drag-state {
	box-shadow: 0 0 5px #8a9196;
}

.main-file-input-tab-button-item.main-file-input-tab-button-active {
	top: 0;
	height: 40px;
	border: 1px solid #C6CDD3;
	border-bottom: 0;
	background: rgba(247,249,250,1);
}

.main-file-input-button-layout.main-file-input-button-make-photo-state .main-file-input-button-name {
	display: inline-block;
}

.main-file-input-button-layout.main-file-input-button-upload-photo-state .main-file-input-button-icon {
	display: none;
}

.main-file-input-button-layout.main-file-input-button-upload-photo-state .main-file-input-button-name {
	display: inline-block;
	margin: auto 0;
}

/* END OF STATEMENTS */



/* CONTROL */
.main-file-input-control {
	position: absolute;
	right: 5px;
	top: 12px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	width: 117px;
	height: 18px;
	border-radius: 64px;
	background: rgba(82,92,104,.5);
	z-index: 1;
}

.main-file-input-control-inner {
	position: relative;
	margin: auto;
	width: 87px;
	height: 12px;
	border-radius: 64px;
	background: rgba(255,255,255,.23);
}

.main-file-input-control-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 21px;
	height: 12px;
	border-radius: 64px;
	background: rgba(255,255,255,.74);
	-webkit-transition: box-shadow .4s;
	transition: box-shadow .4s;
	cursor: pointer;
}

.main-file-input-control-controller {
	width: 15px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-transition: opacity .3s;
	transition: opacity .3s;
	cursor: pointer;
}

.main-file-input-control-controller:hover {
	opacity: .5;
}

.main-file-input-control-minus {
	display: inline-block;
	width: 8px;
	height: 2px;
	background-image: url();
	background-repeat: no-repeat;
}

.main-file-input-control-plus {
	display: inline-block;
	width: 9px;
	height: 8px;
	background-image: url();
	background-repeat: no-repeat;
}

/* END OF CONTROL */

/* MAIN BUTTON */

.main-file-input-button-layout {
	position: absolute;
	left: 50%;
	bottom: -16px;
	border-radius: 64px;
	-webkit-transform: translate(-50%,0);
	transform: translate(-50%,0);
}

.main-file-input-button {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	padding: 0 12px;
	height: 28px;
	min-width: 75px;
	border: 3px solid #F7F9FA;
	border-radius: 64px;
	font: 11px/24px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	font-weight: var(--ui-font-weight-semi-bold, 600);
	color: #fff;
	text-align: center;
	background: #3BC8F5;
	-webkit-transition: background .3s;
	transition: background .3s;
	cursor: pointer;
}

.main-file-input-button:hover {
	background: #3fddff;
}

.main-file-input-button-icon {
	display: inline-block;
	margin: auto 0;
	width: 22px;
	height: 18px;
	background-image: url();
	background-position: center;
	background-repeat: no-repeat;
	vertical-align: middle;
}

.main-file-input-button-name {
	display: none;
	margin: auto 0 auto 8px;
	line-height: 27px;
	text-transform: uppercase;
	vertical-align: middle;
	white-space: nowrap;
}

/* END OF MAIN BUTTON */

/* TAB BLOCK */

.main-file-input-tab-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	padding: 18px 17px 18px 17px;
	height: 330px;
	border: 1px solid #C6CDD3;
	border-radius: var(--ui-border-radius-xs, 2px);
	background: rgba(247,249,250,1);
}

/* AVATAR BLOCK */

.main-file-input-arrow-icon-container {
	position: absolute;
	top: 60px;
	left: 25px;
}

.main-file-input-arrow-icon {
	display: inline-block;
	width: 22px;
	height: 22px;
	background-image: url();
	background-position: center;
	background-repeat: no-repeat;
}

.main-file-input-tab-avatar-block {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	/*margin: auto 0 auto auto;*/
}

.main-file-input-tab-avatar-inner {
	position: relative;
	width: 255px;
}

.main-file-input-tab-avatar-image-container {
	margin: 0 0 30px 0;
	text-align: center;
}

.main-file-input-tab-avatar-image-item {
	overflow: hidden;
	display: inline-block;
	width: 136px;
	height: 136px;
	border-radius: 100%;
	background-image: url();
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-transform: translateZ(0);
	-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}
.main-file-input-tab-avatar-image-item.active {
	background: rgba(82,92,105,.23);
}
.main-file-input-tab-avatar-desc-container {
	margin: 0 auto;
	max-width: 110px;
	font: 15px/17px var(--ui-font-family-primary, var(--ui-font-family-helvetica));
	color: rgba(83,92,105,.5);
	text-align: center;
}

/* END OF AVATAR BLOCK */

/* BASIC CONTENT BLOCK */
.main-file-input-content-block {
	position: relative;
	width: 330px;
	box-sizing: border-box;
}
/* END OF BASIC CONTENT BLOCK */


/* CANVAS BLOCK */
.main-file-input-canvas-block .main-file-input-button-icon {
	display: none;
}
.main-file-input-canvas-block .main-file-input-button-name {
	display: inline-block;
}
/* END CANVAS BLOCK */
/* UPLOAD BLOCK */
.main-file-input-upload-block {
	padding: 10px;
	border: 2px dashed rgba(82,92,104,.36);
	border-radius: 3px;
	background: #fff;
}
.main-file-input-upload-block.dnd-over {
	border-style: solid;
}
.main-file-input-upload-link-container {
	position: absolute;
	top: 44%;
	left: 50%;
	width: 100%;
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-44%);
	text-align: center;
}

.main-file-input-upload-link {
	display: inline-block;
	margin: 0 0 12px 0;
	font: var(--ui-font-weight-bold) 18px/23px var(--ui-font-family-primary, var(--ui-font-family-helvetica));
	color: #1169C3;
	border-bottom: 1px solid rgba(17,105,195,.5);
	-webkit-transition: border-bottom .3s;
	transition: border-bottom .3s;
	cursor: pointer;
	position: relative;
}

.main-file-input-upload-link:hover {
	border-bottom: 1px solid transparent;
}
.main-file-input-upload-link input {
	display: none;
}

.main-file-input-upload-desc {
	font: 12px/14px var(--ui-font-family-primary, var(--ui-font-family-helvetica));
	color: rgba(82,92,104,.5);
}

.main-file-input-upload-info {
	position: absolute;
	bottom: 20px;
	left: 50%;
	-webkit-transform: translate(-50%,0);
	transform: translate(-50%,0);
	font: italic 12px/14px var(--ui-font-family-primary, var(--ui-font-family-helvetica));
	color: rgba(82,92,104,.5);
	text-align: center;
}
/* END OF UPLOAD BLOCK */

/* TAB BUTTONS */

.main-file-input-tab-button-container {
	height: 40px;
}

.main-file-input-tab-button-item {
	position: relative;
	top: 2px;
	display: inline-block;
	padding: 0 22px;
	margin: 0 3px 0 0;
	height: 38px;
	border-radius: 2px 2px 0 0;
	background: rgba(82,92,104,.07);
	font: var(--ui-font-weight-bold) 13px/38px var(--ui-font-family-primary, var(--ui-font-family-helvetica));
	cursor: pointer;
}

.main-file-input-tab-button-item:last-child {
	margin: 0;
}

/* END OF TAB BUTTONS */

/* CAMERA BLOCK */

.main-file-input-camera-block-image {
	display: block;
	width: 330px;
	height: 330px;
	overflow: hidden;
	position: relative;
}
.main-file-input-camera-block-image-inner {
	width: 100%;
	height: 100%;
}

.main-file-input-error {
	color: red;
	position: absolute;
	top: 40%;
	width: 100%;
	display: none;
}
.main-file-input-content-block.errored .main-file-input-error {
	display: block;
}
.main-file-input-user-loader-item {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 70px;
	height: 100px;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
}

.main-file-input-loader {
	position: relative;
	height: 100%;
	min-height: 100px;
	width: 100%;
	&:before {
		content: '';
		display: block;
		padding-top: 100%;
	}
}

.main-file-input-circular {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	height: 50px;
	width: 50px;
	-webkit-animation: rotate 2s linear infinite;
	animation: rotate 2s linear infinite;
	-webkit-transform-origin: center center;
	transform-origin: center center;
}

.main-file-input-path {
	stroke: #3BC8F5;
	stroke-dasharray: 20, 200;
	stroke-dashoffset: 0;
	animation: dash 1.5s ease-in-out infinite;
	stroke-linecap: round;
}

@keyframes rotate {
	100% {
		transform: rotate(360deg);
	}
}

@keyframes dash {
	0% {
		stroke-dasharray: 1, 200;
		stroke-dashoffset: 0;
	}
	50% {
		stroke-dasharray: 89, 200;
		stroke-dashoffset: -35px;
	}
	100% {
		stroke-dasharray: 89, 200;
		stroke-dashoffset: -124px;
	}
}
.main-file-input-content-block.errored .main-file-input-user-loader-item {
	display: none;
}

.main-file-input-camera-block-image video {
	position: absolute;
}
/* END OF CAMERA BLOCK */

/* END OF TAB BLOCK */
.main-file-input-popup {
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Chrome/Safari/Opera */
	-khtml-user-select: none; /* Konqueror */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently*/
}

/* END OF MAIN FILE INPUT POPUP CONTAINER */
